<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
<!--    <h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2>-->
<!--    计算属性-->
    <h2>今天天气很{{info}}</h2>
    <button @click="change">切换天气</button>
    <hr/>
    <h3>a的值为：{{number.a}}</h3>
    <button @click="number.a++">点击一下a+1</button>
    <hr/>
    <h3>b的值为：{{number.b}}</h3>
    <button @click="number.b++">点击一下b+1</button>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
          isHot:true,
            number:{
              a:'1',
                b:'2'
            }
        },
        methods:{
            change(){
                this.isHot=!this.isHot
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        watch:{
            // 当isHot被调用时执行
            // isHot:{
            //     immediate:true,//初始化让handler被调用一下
            //     handler(newValue,oldValue){
            // console.log('isHot被修改了',newValue,oldValue)
            //     }
            // },
            // 简写 不能使用immediate，deep
            isHot(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            },
            number:{
                deep:true,//深度监视开启，多级结构中的所有属性的变化
                  handler() {
                    console.log('number发生改变了')
                  }
            }
        }
    })
</script>
</html>